<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>本地测试</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        .container {
            display: flex;
        }

        #box {
            margin: auto;
            width: 810px;
            height: 600px;
            border: 1px solid #000000;
        }

        div.item {
            width: 150px;
            height: 100px;
            border-radius: 5px;
            margin: 5px;
            float: left;
            background: goldenrod;
            border: 1px solid lightgray;
            z-index: 1;
            cursor: move;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
        }

        div.moving {
            border: 1px dashed gray;
            background: white;
        }

        div.draging {
            width: 150px;
            height: 100px;
            position: absolute;
            background: goldenrod;
            box-shadow: 0 0 2px 2px #555;
            border-radius: 5px;
            z-index: 500;
        }

        .conten {
            width: 100%;
            height: 50px;
            position: relative;
        }

        .conten_img {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
        }

        .name {
            font-size: 28px;
            font-weight: bold;
            color: red;
            z-index: 12;
        }

        #list {
            width: 350px;
            height: 600px;
            border: 1px solid #000;
            position: relative;
        }

        .comp {
            width: 150px;
            height: 100px;
            border-radius: 5px;
            margin: 5px;
            float: left;
            background: goldenrod;
            border: 1px solid lightgray;
            z-index: 1;
            cursor: move;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
        }

        .comp_img {
            width: 60px;
            height: 50px;
        }

        .status {
            font-size: 14px;
        }

        .list_name {
            font-size: 18px;
            font-weight: bold;
        }

    </style>
</head>

<body>
<div class="container">

    <div id="box">
        <div class="item">
            <div class="name">测试1</div>
        </div>
        <div class="item"><img src="img/1.png" width="150" height="100"></div>
        <div class="item"><img src="img/2.png" width="150" height="100"></div>
        <div class="item"><img src="img/3.png" width="150" height="100"></div>
        <div class="item"><img src="img/4.png" width="150" height="100"></div>
        <div class="item"><img src="img/5.png" width="150" height="100"></div>
        <div class="item"><img src="img/6.png" width="150" height="100"></div>
        <div class="item"><img src="img/7.png" width="150" height="100"></div>
        <div class="item"><img src="img/8.png" width="150" height="100"></div>
    </div>
    <div id="list">
        <div class="item">
            <img src="img/computer-no.png" alt="" class="comp_img">
            <div class="status">未开机</div>
            <div class="list_name">调度01</div>
        </div>
        <div class="item">
            <img src="img/computer-no.png" alt="" class="comp_img">
            <div class="status">已开机</div>
            <div class="list_name">调度02</div>
        </div>
        <div class="item">
            <img src="img/computer-no.png" alt="" class="comp_img">
            <div class="status">已开机</div>
            <div class="list_name">调度03</div>
        </div>
    </div>
    <div id="operation">
        <button onclick="getTableData()">获取表格数据</button>
    </div>

</div>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script>
    function getTableData()
    {
        var formData = {};
        var t = $('#box').serializeArray();
        console.log(t)
        $.each(t, function() {
            formData[this.name] = this.value;
        });
        console.log(JSON.stringify(formData));
        alert("Hello World!");
    }
</script>
<script type="text/javascript">
    var Astop = true, Bstop = true;
    var Parent = '', toParent = '';
    var a_b = false, b_a = false, a_a = false, b_b = false;//定义两个 模块的 插入关系
    $('.container div.item').on('mousedown', function (e) {
        if (Astop) {
            console.log('选择模块', e)
            console.log('选择模块2', $(this).position())
            if(e.offsetX <= 4) return //防止误操作 故改为距离边框 4 才可进行拖拽操作
            Parent = this.parentNode.id //当前要替换的dom 的 父ID
            Astop = false;
            let that = this;
            let disx = e.offsetX; //获取的拖拽过程的短线的长度（鼠标的位置离盒子边缘的位置）
            let disy = e.offsetY;
            let disx2 = e.clientX; //获取的拖拽过程的短线的长度（鼠标的位置离盒子边缘的位置）
            let disy2 = e.clientY;
            let $clone = $(this).clone(); //克隆
            console.log('克隆出的数据',$clone)
            $clone.addClass('draging').css(Parent=='list'? {top: $(that).position().top, left: disx2-e.offsetX}: { //对克隆的盒子设置类名以及位置
                left: $(this).position().left,
                top: $(this).position().top
            });
                $('.container').append($clone); //追加到box里面
            $(this).addClass('moving').html(''); //被克隆的元素添加类移除内容
            $('.container').on('mousemove', function (e) { //对克隆的盒子进行拖拽
                $clone.css({
                    left: e.pageX - $(this).offset().left - disx,
                    top: e.pageY - $(this).offset().top - disy
                })

            });

            $clone.on('mouseleave', function () {
                //误操作移除div块
                console.log('误操作移出div块')
                // $clone.animate($(that).position(), 400, function () {
                //     $(that).removeClass('moving').html($clone.html()); //恢复被克隆盒子的相关样式
                //     $(this).remove(); //移除被克隆的盒子
                //     Astop = true;
                // });
            })
            $clone.on('mouseup', function () {
                $('.container').off('mousemove'); //取消mousemove事件
                let minIndex = $(that).index(); //最小索引赋初始值
                console.log('最小索引赋初始值 == ',minIndex)
                let minValue = 1000; //初始化最小值，用来存储所有盒子的最小值
                $('.container div.item').not(':last').each(function () { //不包括克隆的那个盒子
                    let smalldistance = Math.sqrt(Math.pow($clone.position().left - $(this).position().left, 2) + Math.pow($clone.position().top - $(this).position().top, 2)); //利用勾股定理获取每一个盒子离克隆出来的盒子的距离
                    if (smalldistance < minValue) { //比较
                        minValue = smalldistance; //获取最小值
                        minIndex = $(this).index(); //获取最小值对应的索引
                        console.log('最后一个是最符合的数据',this)
                    }
                });
                console.log('筛选div的长度', $('.container div.item').not(':last'))
                console.log('获取最小值对应的索引minIndex', minIndex)
                if (minIndex == $(that).index()) { //如果当前最小距离的那个盒子和拖拽的盒子索引相等的话，归位。
                    $clone.animate($(that).position(), 400, function () {
                        $(that).removeClass('moving').html($clone.html()); //恢复被克隆盒子的相关样式
                        $(this).remove(); //移除被克隆的盒子
                        Astop = true;
                    });
                } else {
                    let $minbox = $('.container div.item ').eq(minIndex); //最小索引的盒子
                    console.log($minbox[0].parentNode.id)
                    toParent = $minbox[0].parentNode.id
                    let $clone2 = $minbox.clone(); //克隆一个最小盒子的副本，添加相关样式
                    console.log('clone2的移动效果', $minbox.position().left, $minbox.position().top)
                    $clone2.addClass('draging').css({
                        left: $minbox.position().left,
                        top: $minbox.position().top
                    })
                    $('.container').append($clone2); //追加
                    $minbox.addClass('moving').html('');
                    $clone.animate($minbox.position(), 400, function () { //克隆的内容运动到最小索引的盒子的位置
                        $minbox.removeClass('moving').html($clone.html()); //移除相关样式，添加内容
                        $clone.remove(); //移除克隆的盒子
                        Astop = true;
                    });
                    console.log('克隆的内容运动到指定位置', $(that).position(), {disy2, disx2})
                    // $clone2.animate({
                    //     top:disy2,
                    //     left:disx2
                    // }, 400, function () {
                    // $clone2.animate(
                    //     Parent == toParent ?$(that).position() : {top:disy,left:disx2} , 400, function () {
                    // $clone2.animate(
                    //     $(that).position(), 400, function() {
                    $clone2.animate(
                        Parent == toParent ? $(that).position() : {top: $(that).position().top, left: disx2}, 400, function () {
                            $(that).removeClass('moving').html($clone2.html());
                            $clone2.remove();
                            Astop = true;
                        });
                }
                }
            )
                ;
            }
            return false;
        }
    )
        ;


    // $('#list div.comp').on('mousedown', function (e) {
    //
    //     if(Bstop){
    //         console.log('Bstop e=',e)
    //         Bstop = false;
    //         let that = this;
    //         let disx = e.offsetX; //获取的拖拽过程的短线的长度（鼠标的位置离盒子边缘的位置）
    //         let disy = e.offsetY;
    //         let $clone = $(this).clone(); //克隆
    //         $clone.addClass('draging').css({ //对克隆的盒子设置类名以及位置
    //             left: $(this).position().left,
    //             top: $(this).position().top
    //         });
    //         $('#list').append($clone); //追加到box里面
    //         $(this).addClass('moving').html(''); //被克隆的元素添加类移除内容
    //         $('#list').on('mousemove', function (e) { //对克隆的盒子进行拖拽
    //             $clone.css({
    //                 left: e.pageX - $(this).offset().left - disx,
    //                 top: e.pageY - $(this).offset().top - disy
    //             })
    //
    //         });
    //
    //         $clone.on('mouseup', function () {
    //             console.log('监听到鼠标抬起事件')
    //             $('#list').off('mousemove'); //取消mousemove事件
    //             let minIndex = $(that).index(); //最小索引赋初始值
    //             let minValue = 1000; //初始化最小值，用来存储所有盒子的最小值
    //             $('#list div.comp').not(':last').each(function () { //不包括克隆的那个盒子
    //                 let smalldistance = Math.sqrt(Math.pow($clone.position().left - $(this).position().left, 2) + Math.pow($clone.position().top - $(this).position().top, 2)); //利用勾股定理获取每一个盒子离克隆出来的盒子的距离
    //                 if (smalldistance < minValue) { //比较
    //                     minValue = smalldistance; //获取最小值
    //                     minIndex = $(this).index(); //获取最小值对应的索引
    //                 }
    //             });
    //             console.log('筛选div的长度', $('#list div.comp').not(':last'))
    //             console.log('获取最小值对应的索引minIndex', minIndex)
    //             if (minIndex == $(that).index()) { //如果当前最小距离的那个盒子和拖拽的盒子索引相等的话，归位。
    //                 $clone.animate($(that).position(), 400, function () {
    //                     $(that).removeClass('moving').html($clone.html()); //恢复被克隆盒子的相关样式
    //                     $(this).remove(); //移除被克隆的盒子
    //                     Bstop = true;
    //                 });
    //             } else {
    //                 let $minbox = $('#list div.comp ').eq(minIndex); //最小索引的盒子
    //                 let $clone2 = $minbox.clone(); //克隆一个最小盒子的副本，添加相关样式
    //                 $clone2.addClass('draging').css({
    //                     left: $minbox.position().left,
    //                     top: $minbox.position().top
    //                 })
    //                 $('#list').append($clone2); //追加
    //                 $minbox.addClass('moving').html('');
    //                 $clone.animate($minbox.position(), 400, function () { //克隆的内容运动到最小索引的盒子的位置
    //                     $minbox.removeClass('moving').html($clone.html()); //移除相关样式，添加内容
    //                     $clone.remove(); //移除克隆的盒子
    //                     Bstop = true;
    //                 });
    //                 $clone2.animate($(that).position(), 400, function () {
    //                     $(that).removeClass('moving').html($clone2.html());
    //                     $clone2.remove();
    //                     Bstop = true;
    //                 });
    //             }
    //         });
    //     }
    //     return false;
    // })
    // $('.container').on('mouseover', function (e) {
    //     console.log(`表格选择状态${Astop} 列表选择状态${Bstop}`)
    //     if(Astop&&!Bstop){
    //         console.log('列表拖动到表格')
    //         //若是拖动 table
    //         // console.log('列表 鼠标悬停事件监听查看 Astop 状态',Bstop)
    //     }
    //     // if(Bstop){
    //     //     //若是拖动 list
    //     //     $('#box').on('mouseover', function (e) { //对克隆的盒子进行拖拽
    //     //         console.log('列表拖动到表格了')
    //     //     });
    //     // }
    //
    // })
    // $('#box div.item').on('mousedown', function (e) {
    //     if (Astop) {
    //         Astop = false;
    //         let that = this;
    //         let disx = e.offsetX; //获取的拖拽过程的短线的长度（鼠标的位置离盒子边缘的位置）
    //         let disy = e.offsetY;
    //         let $clone = $(this).clone(); //克隆
    //         $clone.addClass('draging').css({ //对克隆的盒子设置类名以及位置
    //             left: $(this).position().left,
    //             top: $(this).position().top
    //         });
    //         $('#box').append($clone); //追加到box里面
    //         $(this).addClass('moving').html(''); //被克隆的元素添加类移除内容
    //         $('#box').on('mousemove', function (e) { //对克隆的盒子进行拖拽
    //             $clone.css({
    //                 left: e.pageX - $(this).offset().left - disx,
    //                 top: e.pageY - $(this).offset().top - disy
    //             })
    //
    //         });
    //
    //         $clone.on('mouseup', function () {
    //             $('#box').off('mousemove'); //取消mousemove事件
    //             let minIndex = $(that).index(); //最小索引赋初始值
    //             let minValue = 1000; //初始化最小值，用来存储所有盒子的最小值
    //             $('#box div.item').not(':last').each(function () { //不包括克隆的那个盒子
    //                 let smalldistance = Math.sqrt(Math.pow($clone.position().left - $(this).position().left, 2) + Math.pow($clone.position().top - $(this).position().top, 2)); //利用勾股定理获取每一个盒子离克隆出来的盒子的距离
    //                 if (smalldistance < minValue) { //比较
    //                     minValue = smalldistance; //获取最小值
    //                     minIndex = $(this).index(); //获取最小值对应的索引
    //                 }
    //             });
    //             console.log('筛选div的长度', $('#box div.item').not(':last'))
    //             console.log('获取最小值对应的索引minIndex', minIndex)
    //             if (minIndex == $(that).index()) { //如果当前最小距离的那个盒子和拖拽的盒子索引相等的话，归位。
    //                 $clone.animate($(that).position(), 400, function () {
    //                     $(that).removeClass('moving').html($clone.html()); //恢复被克隆盒子的相关样式
    //                     $(this).remove(); //移除被克隆的盒子
    //                     Astop = true;
    //                 });
    //             } else {
    //                 let $minbox = $('#box div.item ').eq(minIndex); //最小索引的盒子
    //                 let $clone2 = $minbox.clone(); //克隆一个最小盒子的副本，添加相关样式
    //                 $clone2.addClass('draging').css({
    //                     left: $minbox.position().left,
    //                     top: $minbox.position().top
    //                 })
    //                 $('#box').append($clone2); //追加
    //                 $minbox.addClass('moving').html('');
    //                 $clone.animate($minbox.position(), 400, function () { //克隆的内容运动到最小索引的盒子的位置
    //                     $minbox.removeClass('moving').html($clone.html()); //移除相关样式，添加内容
    //                     $clone.remove(); //移除克隆的盒子
    //                     Astop = true;
    //                 });
    //                 $clone2.animate($(that).position(), 400, function () {
    //                     $(that).removeClass('moving').html($clone2.html());
    //                     $clone2.remove();
    //                     Astop = true;
    //                 });
    //             }
    //         });
    //     }
    //     return false;
    // });
</script>
</body>

</html>
